<template>
  <div>
    <div class="emissionReductionScenario">
      <!-- 标题 -->
      <div class="emissionReductionScenario-title">减排场景</div>


      <!-- 条件筛选 -->
      <div class="emissionReductionScenario-condition">
        <div class="emissionReductionScenario-condition-form">
          <normal-form-plus
            :formModel="formModel"
            :config="config"
            :plus="plus"/>
        </div>
        <div class="emissionReductionScenario-condition-btn">
          <el-button @click="getReductionSceneList()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
          <el-button @click="add()">新增</el-button>
        </div>
      </div>


      <!-- 表格-核算报告 -->
      <div class="emissionReductionScenario-report">
        <normal-table
          :tableData="tableData"
          :paginationConfig="paginationConfig"
          :tableLabel="tableLabel"
          :operationConfig="operationConfig"
          :operationList="operationList"
          @event="handleEvent"
          @changePage="changePage"></normal-table>
      </div>


    </div>
    <!-- 添加减排场景 -->
    <el-dialog
      title="添加减排场景"
      :visible.sync="showWindow"
      width="30%"
      class="form">
      <!-- form表单 -->
      <div class="formData">
        <normal-form
          :formModel="addFormModel"
          :config="addConfig"
          :plus="plus"/>
      </div>
      <span slot="footer" class="form-footer">
          <el-button type="primary" @click="createReductionScene()" class="confirm">确 定</el-button>
          <el-button @click="modifyWindow = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import NormalTable from '@/components/NormalTable'
import NormalForm from '@/components/NormalForm'
import NormalFormPlus from '@/components/NormalFormPlus'

export default {
  name: 'emissionReductionScenario',
  components: {
    NormalTable,
    NormalFormPlus,
    NormalForm
  },
  data() {
    return {
      showWindow: false,
      addConfig: [
        {
          id: '1',
          type: 'input',
          model: 'name',
          name: '减排场景名称',
          edit: true,
          props: {
            placeholder: '减排场景名称',
          }
        },
        {
          id: '2',
          type: 'text',
          model: 'sceneDesc',
          name: '减排场景描述',
          edit: true,
          props: {
            placeholder: '减排场景描述',
          }
        },
        {
          id: '3',
          type: 'input',
          model: 'totalValue',
          name: '总减排量',
          edit: true,
          props: {
            placeholder: '总减排量',
          }
        },
        {
          id: '4',
          type: 'select',
          model: 'totalUnit',
          name: '总减排量单位',
          edit: true,
          props: {
            placeholder: '总减排量单位',
            options: [
              {label: 'tCO2-eq', value: 'tCO2-eq'},
              {label: 'kgCO2-eq', value: 'kgCO2-eq'},
            ]
          }
        },
        {
          id: '5',
          type: 'input',
          model: 'perValue',
          name: '单位减排量',
          edit: true,
          props: {
            placeholder: '单位减排量',
          }
        },
        {
          id: '6',
          type: 'select',
          model: 'perUnit',
          name: '单位减排量单位',
          edit: true,
          props: {
            placeholder: '单位减排量单位',
            options: [
              {label: 'tCO2-eq', value: 'tCO2-eq'},
              {label: 'kgCO2-eq', value: 'kgCO2-eq'},
              {label: '个CO2-eq', value: '个CO2-eq'},
            ]
          }
        },

      ],
      addFormModel: {},
      formModel: {
        name: ""
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '1',
              edit: true,
              type: 'input',
              span: 6,
              model: 'name',
              name: '',
              props: {
                placeholder: "减排场景",

              }
            }
          ]
        },
      ],
      plus: {},
      tableData: [],
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      operationList: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      operationConfig: {select: false},
      tableLabel: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "name",
          label: "滅排场景名称",
          // width:200
        },
        {
          prop: "totalValue",
          label: "总减排量"
        },
        {
          prop: "perValue",
          label: "单位减排量",
          // width:200
        },
        {
          prop: "updater",
          label: "更新人",
          width: 100
        },
        {
          prop: "@updateTime",
          label: "更新时间",
          width: 120
        },
      ],

    }
  },
  mounted() {
    this.getReductionSceneList();
  },
  methods: {
    // 重置表单
    reset() {
      this.formModel.name = ""
      this.getReductionSceneList();
    },
    // 添加减排场景
    add() {
      this.showWindow = true;
    },
    // 添加减排场景
    createReductionScene() {
      this.showWindow = false;
      this.$API.enterprise.createReductionScene({
        ...this.addFormModel,
        perValueType: 0,
        totalValueType: 0,
        type: 0
      }).then(response => {
        this.getReductionSceneList();
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      })
    },
    // 处理表格点击事件
    handleEvent(order, row) {
      if (order === 1) {

      }
    },
    // 分页点击事件
    changePage() {
      this.getReductionSceneList()
    },
    // 获取获取减排场景
    getReductionSceneList() {
      this.$API.enterprise.getReductionSceneList({
        name: this.formModel.name,
        pageNo: this.paginationConfig.page,
        pageSize: this.paginationConfig.pageSize,
      }).then(response => {
        console.log(response)
        // 处理数据格式
        var temData = response.data.list
        for (var i = 0; i < temData.length; i++) {
          temData[i].perValue = "单位减排描述内容：" + temData[i].perValue + temData[i].perUnit
          temData[i].totalValue = "总减排描述内容：" + temData[i].totalValue + temData[i].totalUnit
        }
        console.log("deal")
        console.log(temData)
        this.tableData = temData


      })
    }
  }
}
</script>

<style lang="less" scoped>
.emissionReductionScenario {

  height: 680px;
  overflow: hidden;
  padding: 15px 10px;
  // 标题
  .emissionReductionScenario-title {
    font-size: 16px;
    font-weight: bold;
  }

  .emissionReductionScenario-condition {
    display: flex;

    .emissionReductionScenario-condition-form {
      flex: 3;
    }

    .emissionReductionScenario-condition-btn {
      flex: 1;
    }
  }

  // 核算报告表格
  .emissionReductionScenario-report {
    .emissionReductionScenario-history-title {
      font-size: 14px;
    }
  }
}
</style>
